@extends('frontend.layouts.user_panel')

@section('panel_content')
    <script src="{{ static_asset('assets/js/clipboard.min.js') }}"></script>
    <div class="card">
            <div class="card-header">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-12">
                            <h5 class="h6">{{translate('Profit Report')}}</h5>
                        </div>
                    </div>
                    <div class="row gutters-10">
                        <div class="col-md-3 col-6">
                            <div class="bg-grad-3 text-white rounded-lg mb-4 overflow-hidden">
                                <div class="px-3 pt-3">
                                    <h5 class="fw-700">
                                       {{$today_user_count}}
                                    </h5>
                                    <div class="opacity-50">{{ translate('Today New User')}}</div>
                                </div>
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
                                    <path fill="rgba(255,255,255,0.3)" fill-opacity="1"
                                          d="M0,192L26.7,192C53.3,192,107,192,160,202.7C213.3,213,267,235,320,218.7C373.3,203,427,149,480,117.3C533.3,85,587,75,640,90.7C693.3,107,747,149,800,149.3C853.3,149,907,107,960,112C1013.3,117,1067,171,1120,202.7C1173.3,235,1227,245,1280,213.3C1333.3,181,1387,107,1413,69.3L1440,32L1440,320L1413.3,320C1386.7,320,1333,320,1280,320C1226.7,320,1173,320,1120,320C1066.7,320,1013,320,960,320C906.7,320,853,320,800,320C746.7,320,693,320,640,320C586.7,320,533,320,480,320C426.7,320,373,320,320,320C266.7,320,213,320,160,320C106.7,320,53,320,27,320L0,320Z"></path>
                                </svg>
                            </div>
                        </div>
                        <div class="col-md-3 col-6">
                            <div class="bg-grad-1 text-white rounded-lg mb-4 overflow-hidden">
                                <div class="px-3 pt-3">
                                    <h5 class="fw-700">
                                        {{$total_user_count}}
                                    </h5>
                                    <div class="opacity-50">{{ translate('Total User')}}</div>
                                </div>
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
                                    <path fill="rgba(255,255,255,0.3)" fill-opacity="1"
                                          d="M0,192L30,208C60,224,120,256,180,245.3C240,235,300,181,360,144C420,107,480,85,540,96C600,107,660,149,720,154.7C780,160,840,128,900,117.3C960,107,1020,117,1080,112C1140,107,1200,85,1260,74.7C1320,64,1380,64,1410,64L1440,64L1440,320L1410,320C1380,320,1320,320,1260,320C1200,320,1140,320,1080,320C1020,320,960,320,900,320C840,320,780,320,720,320C660,320,600,320,540,320C480,320,420,320,360,320C300,320,240,320,180,320C120,320,60,320,30,320L0,320Z"></path>
                                </svg>
                            </div>
                        </div>
                        <div class="col-md-3 col-6">
                            <div class="bg-grad-3 text-white rounded-lg mb-4 overflow-hidden">
                                <div class="px-3 pt-3">
                                    <h5 class="fw-700">
                                        {{$today_profit}}
                                    </h5>
                                    <div class="opacity-50">{{ translate('Today Profit')}}</div>
                                </div>
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
                                    <path fill="rgba(255,255,255,0.3)" fill-opacity="1"
                                          d="M0,192L26.7,192C53.3,192,107,192,160,202.7C213.3,213,267,235,320,218.7C373.3,203,427,149,480,117.3C533.3,85,587,75,640,90.7C693.3,107,747,149,800,149.3C853.3,149,907,107,960,112C1013.3,117,1067,171,1120,202.7C1173.3,235,1227,245,1280,213.3C1333.3,181,1387,107,1413,69.3L1440,32L1440,320L1413.3,320C1386.7,320,1333,320,1280,320C1226.7,320,1173,320,1120,320C1066.7,320,1013,320,960,320C906.7,320,853,320,800,320C746.7,320,693,320,640,320C586.7,320,533,320,480,320C426.7,320,373,320,320,320C266.7,320,213,320,160,320C106.7,320,53,320,27,320L0,320Z"></path>
                                </svg>
                            </div>
                        </div>
                        <div class="col-md-3 col-6">
                            <div class="bg-grad-1 text-white rounded-lg mb-4 overflow-hidden">
                                <div class="px-3 pt-3">
                                    <h5 class="fw-700">
                                        {{$total_profit}}
                                    </h5>
                                    <div class="opacity-50">{{ translate('Total Profit')}}</div>
                                </div>
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
                                    <path fill="rgba(255,255,255,0.3)" fill-opacity="1"
                                          d="M0,192L30,208C60,224,120,256,180,245.3C240,235,300,181,360,144C420,107,480,85,540,96C600,107,660,149,720,154.7C780,160,840,128,900,117.3C960,107,1020,117,1080,112C1140,107,1200,85,1260,74.7C1320,64,1380,64,1410,64L1440,64L1440,320L1410,320C1380,320,1320,320,1260,320C1200,320,1140,320,1080,320C1020,320,960,320,900,320C840,320,780,320,720,320C660,320,600,320,540,320C480,320,420,320,360,320C300,320,240,320,180,320C120,320,60,320,30,320L0,320Z"></path>
                                </svg>
                            </div>
                        </div>
                    </div>
                    <div class="row gutters-10">
                        <div class="col-12">
                            <h5 class="bg-secondary p-2  text-right text-light" style="background-color: #59a7e4 !important; color:#f8f9fa !important;text-align:left!important;font-size: 1.0rem">
                                <span id="foo">{{route('home', ['code' => Auth::user()->referral_code])}}</span>
                                <button id="btn-copy" class="btn text-light" type="button" data-clipboard-action="copy"  style="font-size: 1.1rem" data-clipboard-target="#foo">{{translate('Copy')}}</button>         </h5>
                        </div>
                        <script>
                            var clipboard = new ClipboardJS('#btn-copy');
                            clipboard.on('success', function (e) {
                                AIZ.plugins.notify('success', '{{translate('Copy Success')}}');
                            });
                        </script>
                    </div>
                </div>
            </div>

            <div class="card-body">
                <table class="table aiz-table mb-0">
                    <thead>
                    <tr>
                        <!--<th data-breakpoints="lg">#</th>-->
                        <th>
                            <div class="form-group">
                                <div class="aiz-checkbox-inline">
                                    <label class="aiz-checkbox">
                                        <input type="checkbox" class="check-all">
                                        <span class="aiz-square-check"></span>
                                    </label>
                                </div>
                            </div>
                        </th>
                        <th>{{translate('From User')}}</th>
                        <th data-breakpoints="lg">{{translate('Service No')}}</th>
                        <th data-breakpoints="lg">{{translate('Value Before')}}</th>
                        <th data-breakpoints="lg">{{translate('Value')}}</th>
                        <th data-breakpoints="lg">{{translate('Description')}}</th>
                    </tr>
                    </thead>
                    <tbody>
                    @if($list->count())
                        @foreach($list as $key => $item)

                            <tr>
                            <!--<td>{{ ($key+1) + ($list->currentPage() - 1)*$list->perPage() }}</td>-->
                                <td>
                                    <div class="form-group">
                                        <div class="aiz-checkbox-inline">
                                            <label class="aiz-checkbox">
                                                <input type="checkbox" class="check-one" name="id[]"
                                                       value="{{$item->id}}">
                                                <span class="aiz-square-check"></span>
                                            </label>
                                        </div>
                                    </div>
                                </td>
                                <td>{{$item->relate->user->name}}</td>
                                <td>{{$item->relate->no}}</td>
                                <td>{{$item->value_before}}</td>
                                <td>{{$item->value}}</td>
                                <td>{{$item->description}}</td>
                            </tr>

                        @endforeach
                    @endif
                    </tbody>
                </table>
                <div class="aiz-pagination">
                    {{ $list->appends(request()->input())->links() }}
                </div>
            </div>
    </div>

@endsection


@section('script')
    <script type="text/javascript">

        $(document).on("change", ".check-all", function () {
            if (this.checked) {
                // Iterate each checkbox
                $('.check-one:checkbox').each(function () {
                    this.checked = true;
                });
            } else {
                $('.check-one:checkbox').each(function () {
                    this.checked = false;
                });
            }

        });

        $(function () {

        })

    </script>
@endsection
